


//调用
CanvasParticle({
    vx: 4,	//小球x轴速度,正为右，负为左
    vy: 4,	//小球y轴速度
    height: 3,	//小球高宽，其实为正方形，所以不宜太大
    width: 3,
    count: 400,		//点个数
    color: "135,206,235",//点颜色
    stroke: "255,192,203", 		//线条颜色
    dist: 8000, 	//点吸附距离
    e_dist: 20000, 	//鼠标吸附加速距离
    max_conn: 50 	//点到点最大连接数
});



// 价格模拟服务器的数据

let data = [
    { "count": 4000, "price": 1200, "unitPrice": "0.3000" },
    { "count": 8000, "price": 2000, "unitPrice": "0.2500" },
    { "count": 40000, "price": 8000, "unitPrice": "0.2000" }
  ]


/**
 * 3.需求: 遍历data,组装成HTML代码,渲染到price-ul中
 */

//获取元素
let saoZzz=document.querySelector('.sao-zzz')
// console.log(saoZzz);
let price=document.querySelector('.price')
// console.log(price);
let priceAll=document.querySelector('.priceAll')
// console.log(priceAll);
let unitPrice=document.querySelector('.unitPrice')
// console.log(unitPrice);

function renderData() {
    //保存组装好的HTML代码
    let dataHtml = '';
  

    data.forEach(function (v, i) {
      //组装数据
      dataHtml += `
      <li class="${i === 0 ? 'sao-list' : ''}" data-price="${v.price}"  data-unit-price="${v.unitPrice}"  >${v.count}次</li>
    `
    })
  
    //渲染
    saoZzz.innerHTML += dataHtml;
  }
  
  renderData();



  /**
 * 4.需求: 点击saoZzz,
 */
   saoZzz.addEventListener('click', function (e) {

    //筛选出li
    let bool = e.target.nodeName === 'LI' && e.target.className != 'sao-tu';
  
    //判断
    if (bool) {
  
      //先清除掉所有li的类名active
      for (let i = 1; i < saoZzz.children.length; i++) {
        saoZzz.children[i].className = ''
      };
  
      //给当前事件源添加激活样式(active)
      e.target.className = 'sao-list'
  
  
      //设置价格
      priceAll.textContent = e.target.dataset.price;
  
      //设置单价
      unitPrice.textContent = e.target.dataset.unitPrice;
  
    }
  
  })



  
/**
 * 5.需求: api详情选项卡
 * 
 * 
 */

//获取元素
let aipXuan=document.querySelectorAll('.aip-xuan li')
// console.log(aipXuan);
let apiPpp=document.querySelectorAll('.api-ppp')

aipXuan.forEach(function(dom,i){
    dom.addEventListener('click',function(){

        aipXuan.forEach(function(v,index){
            //清除类名
            v.className=''

            apiPpp[index].style.display='none'


        })


        dom.className='start'

        apiPpp[i].style.display='block'


    })
})